<template>
  <div class="box" ref="targetElement">
    <div class="search-box" ref="searchBox">
      <div class="search-top-box">
        <div class="search-top-left-box">
          <el-form label-width="110px" ref="div" :inline="true" :model="formSearch" @submit.native.prevent
            class="demo-form-inline">
            <el-form-item label="项目名称">
              <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_name"
                placeholder="输入项目名称"></el-input>
            </el-form-item>
            <el-form-item label="项目编号">
              <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_number"
                placeholder="输入项目编号"></el-input>
            </el-form-item>
            <el-form-item label="项目品牌">
              <el-select filterable @change="onSearch(1)" v-model="formSearch.brand_id" placeholder="选择项目品牌" clearable
                class="form-width">
                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目类型">
              <el-select filterable @change="onSearch(1)" v-model="formSearch.store_type_id" placeholder="选择项目类型"
                clearable class="form-width">
                <el-option v-for="item in storeTypeList" :key="item.id" :label="item.store_type_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-top-right-box">
          <!-- <p @click="moreSearchFunc">
            {{ moreSearchShow ? "收起" : "展开"
            }}<i :class="moreSearchShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "></i>
          </p> -->
          <el-button type="primary" @click="onSearch(1)">查询</el-button>
        </div>
      </div>
    </div>
    <!-- table -->
    <div class="page-list" ref="pageList">
      <div class="list-top-box">
        <div class="tab-box">
          <el-tabs v-model="formSearch.to_do" @tab-click="onSearch(1)">
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <el-tab-pane label="待处理" name="1"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list-top-box-right">
          <p class="list-top-box-left">
            已选<span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }}数据
          </p>
          <el-button type="primary" :disabled="SCimgFile" @click="SCimgFileFunc"
            v-if="$isPer(permission, ['design_img'])">上传图纸</el-button>
          <el-button type="primary" :disabled="REscimgFile" @click="editImgFunc"
            v-if="$isPer(permission, ['projects_updDesignDrawings'])">重新上传图纸</el-button>
        </div>
      </div>
      <div class="table-box" v-loading="pageLoading">
        <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row :header-cell-style="{
          background: '#FAFBFC',
          color: '#828A9D',
          textAlign: 'center',
        }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData"
          @selection-change="handleSelectionChange" height="100%">
          <el-table-column type="selection" width="80"></el-table-column>
          <el-table-column min-width="140px" prop="" label="ID">
            <template slot-scope="scope">
              <el-button v-if="$isPer(permission, ['design_detail'])" type="text" @click.stop="goToDetail(scope.row)">{{
                $assemblyListNo('XMSJ', scope.row.id) }}</el-button>
              <span v-else>{{ $assemblyListNo('XMSJ', scope.row.id) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sj_xmmc')" min-width="180px" prop="project_name" label="项目名称"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.project_name || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sj_xmbh')" min-width="130px" prop="project_number" label="项目编号"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sj_xmpp')" min-width="120px" prop="brand_name" label="项目品牌"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag :color="`${scope.row.brand_colour}`" style="color: #ffffff;">
                {{ scope.row.brand_name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sj_xmlx')" min-width="120px" prop="project_name" label="项目类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.store_type_name || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sj_pmtwj')" min-width="180px" prop="plan_drawing" label="平面图文件">
            <template slot-scope="scope">
              <div class="img-list-box">
                <el-image class="img-box" v-for="(item, index) in scope.row.project_file.plan_drawing" :key="index"
                  :src="$fileImgFunc(item)" @click="$fileViewHandle(item)">
                </el-image>
              </div>
              <span v-if="!scope.row.project_file.plan_drawing.length">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sj_xgtwj')" min-width="180px" prop="effect_drawing" label="效果图文件">
            <template slot-scope="scope">
              <div class="img-list-box">
                <el-image class="img-box" v-for="(item, index) in scope.row.project_file.effect_drawing" :key="index"
                  :src="$fileImgFunc(item)" @click="$fileViewHandle(item)">
                </el-image>
              </div>
              <span v-if="!scope.row.project_file.effect_drawing.length">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sj_sgtwj')" min-width="180px" prop="construction_drawing"
            label="施工图文件">
            <template slot-scope="scope">
              <div class="img-list-box">
                <el-image class="img-box" v-for="(item, index) in scope.row.project_file.construction_drawing"
                  :key="index" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)">
                </el-image>
              </div>
              <span v-if="!scope.row.project_file.construction_drawing.length">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sj_qtwj')" min-width="180px" prop="other_file" label="其他文件">
            <template slot-scope="scope">
              <div class="img-list-box">
                <el-image class="img-box" v-for="(item, index) in scope.row.project_file.other_file" :key="index"
                  :src="$fileImgFunc(item)" @click="$fileViewHandle(item)">
                </el-image>
              </div>
              <span v-if="!scope.row.project_file.other_file.length">--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-footer">
        <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
          @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import commonApi from "@/api/common";
import { getUserInfo } from "@/utils/auth";
import designApi from "@/api/designApi";
import brandApi from "@/api/brandApi";
import storeTypeApi from "@/api/storeTypeApi";
export default {
  name: "designManagement",
  components: {},
  data() {
    return {
      userInfo: "",
      tableData: [],
      formSearch: {
        to_do: '0',
      },
      moreSearchShow: false,
      page: 1,
      num: 10,
      total: 0,
      pageLoading: false,
      multipleSelection: [],
      storeTypeList: [],//门店类型
      brandList: [],//品牌
      permission: [],//操作权限
    };
  },
  watch: {},
  computed: {
    //  || this.multipleSelection[0].status > 1145
    REscimgFile() {
      if (this.multipleSelection.length == 1 && this.multipleSelection[0].status < 1145
        && (this.multipleSelection[0].project_file.construction_drawing.length != 0 ||
          this.multipleSelection[0].project_file.construction_drawing_image.length != 0 ||
          this.multipleSelection[0].project_file.effect_drawing.length != 0 ||
          this.multipleSelection[0].project_file.effect_drawing_image.length != 0 ||
          this.multipleSelection[0].project_file.other_file.length != 0 ||
          this.multipleSelection[0].project_file.plan_drawing.length != 0 ||
          this.multipleSelection[0].project_file.plan_drawing_image.length != 0
        )
      ) {
        return false;
      } else {
        return true;
      }
    },
    // 上传图纸--客户经理/客户/造价员/设计师 都可上传
    // (this.userInfo.position_id == 2 || this.userInfo.position_id == 3 || this.userInfo.position_id == 5) &&
    SCimgFile() {
      if (this.multipleSelection.length == 1 && (this.multipleSelection[0].status == 1060 || this.multipleSelection[0].status == 1015)) {
        return false;
      } else {
        return true;
      }
    }
  },
  activated() {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    this.hrefQueryFunc(() => {
      this.onSearch();
    })
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  deactivated() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  mounted() {
    this.handleResize();
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    // 操作权限
    this.$getHtmlAuthority(this.$route.path).then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.hrefQueryFunc(() => {
      this.designProjectList();//设计图列表
      this.getStoreTypeList();//门店类型
      this.getBrandList();//品牌
    })
    this.userInfo = getUserInfo();
    console.log(this.userInfo)
  },
  methods: {
    handleResize() {
      const target = this.$refs.targetElement;
      const searchBox = this.$refs.searchBox;
      const pageList = this.$refs.pageList;
      // 创建 ResizeObserver 实例
      const resizeObserver = new ResizeObserver(entries => {
        setTimeout(() => {
          console.log('元素变为:', searchBox.offsetHeight);
          // searchBox.offsetHeight + 'px'
          pageList.style.height = 'calc(100% - ' + (searchBox.offsetHeight + 15) + 'px)';
        }, 0);
      });
      // 开始观察目标元素
      resizeObserver.observe(target);

      // 存储 resizeObserver 实例，以便在组件销毁时停止观察
      this.resizeObserver = resizeObserver;
    },
    // 重新上传图纸
    editImgFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/scsjtCom',
        query: {
          id: this.multipleSelection[0].id,
          route_title: '修改设计图信息'
        }
      })
    },
    // 跳转判断的
    hrefQueryFunc(cb) {
      let query = this.$route.query;
      if (JSON.stringify(query) != "{}") {
        this.formSearch.project_name = query.project_name || '';//筛选项目名
        this.formSearch.to_do = query.to_do || '0';//是否待处理
      }
      cb && cb();
    },
    // 上传图纸
    SCimgFileFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/scsjtCom',
        query: {
          id: this.multipleSelection[0].id
        }
      })
    },
    // ----------------------------table点击行-选中----------------------------
    handleHighlightChangeTable(row) {
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
    },
    // 门店类型
    getStoreTypeList() {
      storeTypeApi.getStoreTypeList({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "门店类型")
        if (res.code == 200) {
          this.storeTypeList = res.data.list;
        }
      })
    },
    // 品牌
    getBrandList() {
      brandApi.getBrandList({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "项目品牌")
        if (res.code == 200) {
          this.brandList = res.data.list;
        }
      })
    },
    // 设计列表
    designProjectList() {
      this.pageLoading = true;
      let formSearch = this.formSearch;
      designApi.designProjectList({
        page: this.page,
        num: this.num,
        to_do: formSearch.to_do || 0,
        brand_id: formSearch.brand_id || '',
        store_type_id: formSearch.store_type_id || '',
        project_name: formSearch.project_name || '',
        project_number: formSearch.project_number || '',
      }).then(res => {
        console.log(res, "设计图列表")
        this.pageLoading = false;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.max;
        }
      })
    },
    // 单页数据量修改
    handleSizeChange(e) {
      this.num = e;
      this.onSearch(1);
    },
    // 页面权限
    getHtmlAuthority() {
      commonApi
        .getHtmlAuthority({
          path: this.$route.path,
        })
        .then((res) => {
          console.log(res, "页面权限");
          if (res.code == 200) {
            this.HtmlAuthority = res.data;
          }
        });
    },
    // 搜索
    onSearch(page) {
      this.page = typeof page == 'number' ? page : this.page;
      this.designProjectList();
    },
    // 翻页
    handleCurrentChange(page) {
      this.onSearch(page);
    },
    moreSearchFunc() {
      this.moreSearchShow = !this.moreSearchShow;
      this.$nextTick(() => {
        this.handleResize();
      })
    },
    goToDetail(row) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/designDetailPage?id=' + row.id
      })
    },
    handleSelectionChange(e) {
      console.log(e);
      this.multipleSelection = e;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/listPage.scss'
</style>